{extend name="common@portalBase" /}
{block name="content"}
<style>
  .list-group {
    text-align: center;
  }

  .clicked {
    background-color: rgb(245, 245, 245);
  }

  .menu {
    background-image: url("/static/images/arrow.png");
    background-repeat: no-repeat;
    background-position: 25% center;
    background-size: 30px;

  }
</style>
<section class="content" id="demo">
  <div class="row">
    <div class="col-xs-12 col-sm-9">
      <div class="panel panel-primary" style="border:none;">
        <div class="panel-heading">
          <div class="panel-title"> 安全常识</div>
        </div>
        <div class="panel-body">
          <div class="media media1" style="margin: 0 10px 0 20px;" v-for="(item,index) in items">
            <div class="media-body">
              <h4 class="media-heading media-heading1" style="color: #3c3b3b;line-height: 30px;">
                <a :href="'view/id/' + item.id" class="skeletonize" target="_blank">{{item.title}}</a>
              </h4>
              <p style="color:#949393;margin-top:10px;line-height: 25px;">{{item.desc}}...
              </p>
              <p class="pull-right author">{{item.realname}} {{item.create_time}} </p>
            </div>
            <a :href="'view/id/' + item.id" class="media-right">
              <img :src='item.thumb' alt="" height="150px">
            </a>
            <hr class="hr1" width="98%" color="#6f5499" size="3"/>

          </div>
        </div>
      </div>
      <div style="text-align: center" v-show="isEnd==true">
        <hr>
        <p>我是有底线的</p>
        <hr>
      </div>
    </div>
    <div class="col-xs-12 col-sm-3">
      <div class="panel panel-primary" style="border:none;">
        <div class="list-group">
          <a href="#" class="list-group-item active" @click="getCateData(0)">所有分类</a>
          <a href="#" class="list-group-item " @click="getCateData(index)"
             v-bind:class="{'clicked':cateId==index,'menu':cateId==index}"
             v-for="(item,index) in catesSorted"> {{item.title}}</a>
        </div>
      </div>
      <ul class="list-group">
        <li class="list-group-item"><a href="{:url('study/view')}" class="btn btn-primary btn-block">顺序练习</a></li>
        <li class="list-group-item"><a href="{:url('test/view_pre')}" class="btn btn-primary btn-block">模拟考试</a></li>
      </ul>
    </div>
  </div>
</section>
{/block}
{block name="page_script"}
<script>
  require(["vue"], function (Vue) {
    new Vue({
      el: "#demo",
      data: {
        url: "{:url('view')}",
        cates: JSON.parse('{$cates}'),
        cateId: 0,
        page: 1,
        clearData: false,
        isEnd: false,//是否到底
        items: []
      },
      created: function () {
        var that = this;
        var page = this.page;
        this.getData();
        $(window).scroll(function () {
          var scrollTop = $(this).scrollTop();
          var scrollHeight = $(document).height();
          var windowHeight = $(this).height();
          if (scrollTop + windowHeight === scrollHeight && !that.isEnd) {
            that.page = that.page + 1;
            that.getData();
          }
        });
      },
      computed: {
        catesSorted: function () {
          var cates = this.cates;
          console.log(cates);
          cates.sort(function(a,b){
            if(a[1]<b[1]){
              return -1;
            }
            if(a[1]>b[1]){
              return 1;
            }
            return 0;
          });

          return cates;

        }
      },
      mounted: function () {
      },
      methods: {
        itemClick: function (id) {
          window.location.href = "{:url('view',null,false)}" + "/id/" + id;
        },
        getCateData: function (index) {
          this.cateId = index;
          this.items = [];
          this.page = 1;
          this.getData();
        },
        getData: function () {
          var that = this, cateId = this.cateId, page = this.page;
          $.get("{:url('portal/knowledge/index')}", {"page": page, "cate": cateId}, function (result) {
            if (result.data.length > 0) {
              that.items = that.items.concat(result.data);
            } else {
              that.isEnd = true;
            }
            this.clearData = false;
          });
        }
      },
    });
  });
</script>
{/block}





